<!DOCTYPE html>
<html lang="en">

<head>
  <!-- 通过meta标签,设定读取网络来源图片 -->
  <meta name="referrer" content="never">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../tools/jquery-pagination/pagination.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/list.css">
  <style>
    h1{
      font-size: 24px;
      text-align: center;
    }

    .breadcrumb {
      padding-left: 6px;
      padding-right: 6px;
    }

    .box {
      width: 800px;
      margin: 100px auto;
    }

    .m-style .next,
    .m-style .prev {
      border: 2px solid red;
    }

    .m-style .active {
      background: orange;
      border: 1px solid orange;

    }

    .m-style .jump-ipt {
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>列表页</h1>

  <div class="pagi"></div>

  <!-- 分页器 一般是在 内容下方 为了看着方便写在 内容上方 -->
  <div class="box m-style"></div>

  <div class="container">
    <ul></ul>
  </div>



  <script src="../js/jquery.min.js"></script>
  <script src="../tools/jquery-pagination/jquery.pagination.js"></script>
  <script src="../js/tools.js"></script>
  <script>
    // 1, 获取浏览器地址栏参数 结果是一个对象
    const urlObj = getUrlVal()
    console.log(urlObj);

    // 2, 设定参数 page line
    let page = 1;
    let line = 8;

    // 3, 通过调用函数 获取 页数是 1 的数据
    // 动态 渲染生成 最初的页面内容
    setPage();


    // 函数
    function setPage() {
      // 使用promise语法形式 发送请求
      const p = new Promise(function (f, r) {
        // 设定 ajax请求
        $.ajax({
          url: '../server/goods_list.php',
          type: 'get',
          data: { cat_one_id: urlObj.cat_one_id, page, line },
          dataType: 'json',
          success: f,
          error: r,
        })
      })
      // 请求成功 动态渲染生成页面 生成 分页器
      p.then(function (res) {
        // console.log(res);
        // 动态渲染生成li标签
        str = '';
        res.data.forEach(item => {
          str += `
            <li class="list-item">
              <div class="panel panel-primary">
                <div class="panel-body">
                  <ol class="breadcrumb">
                    <li><a href="#">${item.cat_one_id}</a></li>
                    <li><a href="#">${item.cat_two_id}</a></li>
                    <li class="active">${item.cat_three_id}</li>
                  </ol>
                </div>
                <div class="panel-footer">
                  <div class="row">
                    <div class="">
                      <div class="thumbnail">
                        <img src="${item.goods_big_logo}" alt="...">
                        <div class="caption">
                          <h3>${item.goods_name}</h3>
                          <p>
                            <i class="glyphicon glyphicon-yen"></i>
                            <span>${item.goods_price}</span>
                          </p>
                          <p>
                            <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a>
                            <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          `;
        })
        // 将 字符串 写入页面
        $('.container ul').html(str);

        // 获取数据库数据 动态生成 页面后 
        // 使用分页器 生成 分页显示
        $('.box').pagination({
          pageCount: res.sumPage,         // 总页数
          totalData: res.row,             // 数据总数量
          current: res.page,              // 当前是第几页
          showData: res.line,             // 每页数据数量
          prevCls: 'prev',                // 上一页的class类名 使用原始类名保留默认样式
          nextCls: 'next',                // 下一页的class类名 使用原始类名保留默认样式
          prevContent: '上一页',          // 上一页文本内容
          nextContent: '下一页',          // 下一页文本内容
          activeCls: 'active',            // 选中状态类名
          mode: 'fixed',                  // 固定 分页按钮数量
          count: 5,                      // 除了选中页 表示页数的按钮的数量 设定4 一共显示5个按钮
          coping: true,                   // 开启首页末页
          homePage: '首页',               // 首页文字内容
          endPage: '末页',                // 末页文字内容
          isHide: true,                   // 总页数 为 0 或者 1 时 隐藏 分页控件
          // keepShowPN: false,           // 只有 mode: 'unfixed', 不固定按钮时 可以设定 
          jump: true,                     // 开启页数跳转 
          jumpIptCls: 'jump-ipt',         // 跳转 input 样式类名
          jumpBtnCls: 'jump-btn',         // 跳转 button 样式类名
          jumpBtn: '跳转',                // 跳转 button 内容
          callback: function (val) {      // 回调函数 必须要有一个参数 存储数据
            console.log(val);
            // 参数.getCurrent() 
            // 获取 点击按钮 对应的页数 
            // 设定 给 page 变量储存
            page = val.getCurrent();
            // 根据 新的 page 的数据 也是 页数的数据
            // 再次 发送 ajax请求 获取 数据库数据 再次动态渲染生成页面 再次生成 分页器
            // 也就是 再次调用函数本身
            setPage();
          }

        });

      })
      
    }

  </script>

</body>
</html>